<template>
  <el-container>
    <el-header style="height:60px; border-bottom: 1px solid #eee;">
      <div style="float:left;width:240px;height:50px;font-size: 36px;margin-top:5px">图书检索</div>

      <div style="float:left;width:80px;height:30px;text-align:bottom;margin-top:25px;margin-right: 5%;">
        <el-button size="mini" type="primary" @click="getBookByAuthor()">作者名检索</el-button>
      </div>
      <div style="float:left;width:80px;height:30px;text-align:bottom;margin-top:25px;margin-right: 5%;">
        <el-button size="mini" type="primary" @click="getBookByBookType()">图书类型检索</el-button>
      </div>
      <div style="float:left;width:80px;height:30px;text-align:bottom;margin-top:25px;margin-right: 5%;">
        <el-button size="mini" type="primary" @click="getBookByUserName()">用户名检索</el-button>
      </div>
    </el-header>

    <el-main>
      <el-table :data="filteredTableData" style="width: 100%" max-height="680">
        <el-table-column
          prop="id"
          label="ID"
          min-width="15%">
        </el-table-column>       
        <el-table-column
          prop="bookName"
          label="图书名"
          min-width="15%">
        </el-table-column>

        <el-table-column
          prop="bookType"
          label="图书类型"
          min-width="15%">                 
        </el-table-column>

        <el-table-column
          prop="author"
          label="作者名"
          min-width="15%">                 
        </el-table-column>

      </el-table>
    </el-main>
  </el-container>
</template>

<script>
export default {
  name: 'BookSearch',
  data() {
    return {
      loading: false,
      search: '',
      tableData: [], // 数据源
    }
  },
  computed: {
    // 根据搜索条件过滤数据
    filteredTableData() {
      const { search, tableData } = this;
      return tableData.filter(data => !search || data.id.toLowerCase().includes(search.toLowerCase()));
    }
  },
  methods: {
    // 作者名检索
    getBookByAuthor() {
      this.$prompt('请输入作者名', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /.+/,
        inputErrorMessage: '请输入作者名',
      }).then(({ value }) => {
        // 执行检索操作，根据作者名搜索图书
        this.$api.post('book/getBooksByAuthor', {"author":value}).then((res) => {                        
        if (res.code === 200) {     
             this.tableData = res.data
          } else {
            alert('获取图书数据失败!')
          }
          })
        console.log('用户输入的作者名：', value);
        // 调用后端接口进行检索，更新 tableData 数据源
      }).catch(() => {
        // 用户点击取消按钮
      });
    },
    // 图书类型检索
    getBookByBookType() {
      this.$prompt('请输入图书类型', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /.+/,
        inputErrorMessage: '请输入图书类型',
      }).then(({ value }) => {
        // 执行检索操作，根据图书类型搜索图书
        this.$api.post('book/getBooksByBookType', {"bookType":value}).then((res) => {                        
        if (res.code === 200) {     
             this.tableData = res.data
          } else {
            alert('获取图书数据失败!')
          }
          })
        console.log('用户输入的图书类型：', value);
        // 调用后端接口进行检索，更新 tableData 数据源
      }).catch(() => {
        // 用户点击取消按钮
      });
    },
    // 用户名检索
    getBookByUserName() {
      this.$prompt('请输入用户名', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /.+/,
        inputErrorMessage: '请输入用户名',
      }).then(({ value }) => {
        // 执行检索操作，根据用户名搜索图书
        this.$api.post('book/getBooksByUserName', {"username":value}).then((res) => {                        
        if (res.code === 200) {     
             this.tableData = res.data
          } else {
            alert('获取图书数据失败!')
          }
          })
        console.log('用户输入的用户名：', value);
        // 调用后端接口进行检索，更新 tableData 数据源
      }).catch(() => {
        // 用户点击取消按钮
      });
    },
  },
};
</script>